import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import { Form, Input, Select, Button, Card, Modal, message, Divider } from 'antd';
import Img from 'react-image';

import DescriptionList from '../../components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { urlParams } from '../../utils/utils';
import globalConstant from '../../utils/globalConstant';
import { add } from '../../utils/images';

const { TextArea } = Input;
const { Description } = DescriptionList;
const FormItem = Form.Item;

@connect(({ packageOrder, immanage, general, loading }) => ({
  packageOrder,
  general,
  immanage,
  loading: loading.models.packageOrder,
}))
@Form.create()
export default class AuditOrderDetails extends PureComponent {
  state = {
    showPassVisible: false,
    showUnPassVisible: false,
    showDetails: false,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    const id = urlParams('id', window.location.href);
    dispatch({
      type: 'general/getworkerList',
    });
    dispatch({
      type: 'packageOrder/getPackageOrderDetail',
      payload: {
        id,
      },
    });
  }
  handleShowOrCancelVisible = (value) => {
    if (value === 'showPassVisible') {
      this.setState({
        showPassVisible: !this.state.showPassVisible,
      });
    }
    if (value === 'showUnPassVisible') {
      this.setState({
        showUnPassVisible: !this.state.showUnPassVisible,
      });
    }
  }
  handleUnPass =() => {
    const { validateFields } = this.props.form;
    const { dispatch } = this.props;
    validateFields(['remark'], (error, values) => {
      if (error) {
        return;
      }
      dispatch({
        type: 'immanage/checkAndAssign',
        payload: {
          id: this.props.packageOrder.packageOrderInfo.workId,
          isChecked: false,
          checkFailedMsg: values.remark,
        },
        callback: () => {
          this.props.dispatch(routerRedux.push('/account/auditfailure'));
          message.success('操作成功');
        },
      });
    });
  }
  handlePass = () => {
    const { validateFields } = this.props.form;
    const { dispatch } = this.props;
    const { packageOrderInfo } = this.props.packageOrder;
    validateFields(['netAccountInfo', 'assignMaster'], (error, values) => {
      if (error) {
        return;
      }
      dispatch({
        type: 'immanage/checkAndAssign',
        payload: {
          id: this.props.packageOrder.packageOrderInfo.workId,
          isChecked: true,
          netAccountInfo: values.netAccountInfo,
          workerId: values.assignMaster,
        },
        callback: () => {
          message.success('操作成功');
          this.props.dispatch(routerRedux.push(`/account/installationworksheet?id=${packageOrderInfo.workId}`));
        },
      });
    });
  }
  handleShow = () => {
    this.setState({
      showDetails: !this.state.showDetails,
    });
  }
  render() {
    const { loading } = this.props;
    const { packageOrderInfo } = this.props.packageOrder;
    const { workerList } = this.props.general;
    const { getFieldDecorator } = this.props.form;
    const { showPassVisible, showUnPassVisible } = this.state;
    return (
      <PageHeaderLayout title="用户管理">
        <Card title="未审核订单" loading={loading} bordered={false} extra={`报装时间：   ${moment(packageOrderInfo.createTime).format(globalConstant.time)}`} >
          <DescriptionList size="large" title="订单信息" style={{ marginBottom: 32 }} col={2}>
            <Description term="报装套餐">{packageOrderInfo.packagesName}</Description>
            <Description term="姓名">{packageOrderInfo.userName}</Description>
            <Description term="报装地址">{packageOrderInfo.installAddress}</Description>
            <Description term="联 系 人">{packageOrderInfo.userContactName}</Description>
            <Description term="联系电话">{packageOrderInfo.userContactPhone}</Description>
          </DescriptionList>
          <DescriptionList size="large" title="身份信息" style={{ marginBottom: 32 }} col={2} />
          <DescriptionList size="large" title="" style={{ marginBottom: 32 }} col={2}>
            <Description term="身份证照片(1)">
              <Img style={{ width: 170, height: 90 }} src={packageOrderInfo.idcardPhotoFront} />
            </Description>
            <Description term="身份证照片(2)">
              <Img style={{ width: 170, height: 90 }} src={packageOrderInfo.idcardPhotoSide} />
            </Description>
            <Description term="身份证号码">
              <div>
                {packageOrderInfo.userIdcard}
              </div>
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="小区验证" style={{ marginBottom: 32 }} col={2}>
            <Description term="套餐是否覆盖小区">{
              packageOrderInfo.packageCommunities &&
              packageOrderInfo.packageCommunities.map((item, index) => {
                return (
                  item.communityName === packageOrderInfo.communityName ? (
                    <div style={{ color: '#3aff93' }} key={index.toString()}>{item.communityName}</div>
                  ) : (
                    <div style={{ color: '#ff0c18' }} key={index.toString()}>{item.communityName}</div>
                  )
                  );
              })
            }
            </Description>
            <Description term="报装小区">{packageOrderInfo.communityName}</Description>
            <DescriptionList size="large" title="支付验证" style={{ marginBottom: 32 }} col={2}>
              <Description term="支付流水号">{packageOrderInfo.outTradeOrderNo}</Description>
              <Description term="支付金额">{packageOrderInfo.orderPrice}元</Description>
              <Description term="支付状态">
                {packageOrderInfo.payStatusDesc}
              </Description>
            </DescriptionList>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          {
            this.state.showDetails === true ?
            (
              <DescriptionList size="large" title="其他详情" style={{ marginBottom: 32 }} col={2}>
                <Description term="订单编号">{packageOrderInfo.orderNo}</Description>
                <Description term="订单类型">{packageOrderInfo.orderTypeDesc}</Description>
                <Description term="套餐编号">{packageOrderInfo.packagesId}</Description>
                <Description term="价格">{packageOrderInfo.packagesPrice}</Description>
                <Description term="带宽">{packageOrderInfo.packagesSpeed}</Description>
                <Description term="套餐时长">{packageOrderInfo.packagesDuration}</Description>
                <Description
                  term="生效时间"
                >{moment(packageOrderInfo.effectiveTime).format(globalConstant.dateFormat) || ''}
                </Description>
                <Description
                  term="失效时间"
                >{moment(packageOrderInfo.effectiveTime).format(globalConstant.dateFormat) || ''}
                </Description>
                <Description term="联系电话">{packageOrderInfo.userMobile}</Description>
                <Description term="联系地址">{packageOrderInfo.userAddr}</Description>
                <Description term="联系邮箱">{packageOrderInfo.userEmail}</Description>
                <Description term="认证状态">{packageOrderInfo.userIsAuthed}</Description>
                <Description term="审核状态">{packageOrderInfo.checkStatusDes}</Description>
                <Description term="状态追踪">{packageOrderInfo.workOrderStatus}</Description>
                <Description term="推荐人联系电话">{packageOrderInfo.referencePhone}</Description>
              </DescriptionList>
            ) : null
          }
          <DescriptionList onClick={() => { this.handleShow(); }} size="large" title="" style={{ float: 'right', marginRight: 50, marginTop: -20 }} col={2} >
            <span style={{ width: 35, padding: 0 }}>{this.state.showDetails === true ? '收起' : '展开'}</span>
            <img style={{ width: 20, padding: 0, marginTop: -5 }} src={add} alt="" />
          </DescriptionList>
          <DescriptionList size="large" title="" style={{ marginBottom: 32, marginTop: 50 }} col={2}>
            <Description term="">
              <Button style={{ width: 150 }} type="primary" onClick={() => { this.handleShowOrCancelVisible('showPassVisible'); }}>
                审核通过并派单
              </Button>
            </Description>
            <Description term="">
              <Button style={{ width: 100 }} type="primary" onClick={() => { this.handleShowOrCancelVisible('showUnPassVisible'); }}>
                审核不通过
              </Button>
            </Description>
          </DescriptionList>
        </Card>
        <Modal
          visible={showPassVisible}
          destroyOnClose
          title="审核订单"
          onCancel={() => { this.handleShowOrCancelVisible('showPassVisible'); }}
          footer={[
            <Button key="back" onClick={() => { this.handleShowOrCancelVisible('showPassVisible'); }}>取消审核</Button>,
            <Button key="submit" type="primary" onClick={() => { this.handlePass(); }}>
              审核通过
            </Button>,
            ]}
        >
          <Form>
            <FormItem
              label="宽带信息"
            >
              {getFieldDecorator('netAccountInfo', {
                initialValue: packageOrderInfo.netAccountInfo,
                rules: [{
                  required: true, message: '请输入宽带信息',
                }],
              })(
                <TextArea
                  placeholder="请输入宽带宽带账号信息"
                  rows={4}
                />
              )}
            </FormItem>
            <FormItem
              label="指派师傅"
            >
              {getFieldDecorator('assignMaster', {
                initialValue: packageOrderInfo.workerId,
                rules: [{
                  required: true, message: '请选择指派的师傅',
                }],
              })(
                <Select>
                  {
                    workerList && workerList.map((item, index) => {
                      return (
                        <Select.Option
                          key={index.toString()}
                          value={item.id}
                        >
                          {item.userName}
                        </Select.Option>
                      );
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Form>
        </Modal>
        <Modal
          visible={showUnPassVisible}
          destroyOnClose
          title="审核订单"
          onCancel={() => { this.handleShowOrCancelVisible('showUnPassVisible'); }}
          footer={[
            <Button key="back" onClick={() => { this.handleShowOrCancelVisible('showUnPassVisible'); }}>取消审核</Button>,
            <Button key="submit" type="primary" onClick={() => { this.handleUnPass(packageOrderInfo.id); }}>
              审核不通过
            </Button>,
          ]}
        >
          <Form>
            <FormItem
              label="拒绝通过的理由"
            >
              {getFieldDecorator('remark', {
                rules: [{
                  required: true, message: '请说明不能通过审核的原因',
                }],
              })(
                <TextArea
                  placeholder="请说明不能通过审核的原因"
                  rows={4}
                />
              )}
            </FormItem>
          </Form>
        </Modal>
      </PageHeaderLayout>
    );
  }
}
